import { RouterView, createRouter, createWebHashHistory } from 'vue-router'
import { h } from 'vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: () => import('./components/home.vue') },
        {
            path: '/popsci',
            component: () => import('./components/popsci.vue'),
            redirect: '/popsci/directory',
            children: [
                {
                    path: 'information',
                    component: { render: () => h(RouterView) },
                    children: [
                        {
                            path: ':id',
                            name: 'PageOne',
                            component: () => import('./components/DetailsPage/informationPage.vue'), props: true
                        }
                    ]
                },
                {
                    path: 'directory',
                    component: { render: () => h(RouterView) },
                    children: [
                        {
                            path: '',
                            component: () => import('./components/Popsci/directory.vue')
                        },
                        {
                            path: ':id',
                            name: 'PageTwo',
                            component: () => import('./components/DetailsPage/directoryPage.vue'), props: true
                        }
                    ]
                },

            ]
        },
        {
            path: '/Policie',
            component: () => import('./components/PolicieRegulation.vue'),
            redirect: '/Policie/Plant',
            children: [
                {
                    path: 'Plant',
                    component: () => import('./components/Policie/Plant.vue')
                },
                {
                    path: 'PlantPage/:id',
                    name: 'PlantPage',
                    component: () => import('./components/DetailsPage/PlantPage.vue'),
                    props: true
                },
                {
                    path: 'AnimalPage/:id',
                    name: 'AnimalPage',
                    component: () => import('./components/DetailsPage/AnimalPage.vue'),
                    props: true
                }
            ]
        },
        { path: '/TC', component: () => import('./components/TrainingCourse.vue')},
        { path: '/PJ',component: () => import('./components/ProjectAll.vue')},
        { path: '/ID', component: () => import('./components/IndustryDynamics.vue') },
        { path: '/links', component: () => import('./components/AboutLinks.vue') },
        { path: '/MF', component: () => import('./components/MicroFilm.vue') },
        { path: '/CG', component: () => import('./components/PresentationResults.vue') },
        { path: '/CGPage/:id', name: 'CGPage', component: () => import('./components/DetailsPage/PresentationResultsPage.vue'), props: true },
        { path: '/IDPage/:id', name: 'IDPage', component: () => import('./components/DetailsPage/IndustryDynamicsPage.vue'), props: true },
        { path: '/TCPage/:id', name: 'TCPage', component: () => import('./components/DetailsPage/TrainingCourseDetail.vue'), props: true },
        { path: '/PJPage/:id', name: 'PJPage', component: () => import('./components/DetailsPage/ProjectAllPage.vue'), props: true },
        { path: '/MFPage/:id', name: 'MFPage', component: () => import('./components/DetailsPage/MicroFilmPage.vue'), props: true },
    ]
})

export default router
